import { ImageViewer } from "@/components/common/ImageViewer";
import { clearNoNum, clearSuffix } from "@/utils/inupt";

export function useShipperAdd() {
  const columns: TableColumnList = [
    {
      label: "商品名称",
      prop: "spmc",
      minWidth: "180px",
      cellRenderer: ({ row }) => (
        <div class="flex items-center">
          <ImageViewer src={row.imageJson} radius="8px" />
          <div class="ml-2 flex-1 text-left">{row.goodsName}</div>
        </div>
      )
    },
    {
      label: "商品规格",
      prop: "spgg",
      minWidth: "120px"
    },
    {
      label: "商品单价(元)",
      prop: "spdj",
      minWidth: "110px",
      cellRenderer: ({ row }) => (
        <el-input
          v-model={row.spdj}
          placeholder="请输入"
          clearable
          onInput={$event => (row.spdj = clearNoNum($event))}
          onBlur={() => (row.spdj = clearSuffix(row.spdj))}
        />
      )
    },
    {
      label: "商品数量",
      prop: "spsl",
      minWidth: "152px",
      cellRenderer: ({ row }) => (
        <el-input-number
          min={row.orderMin || 1}
          step={1}
          step-strictly
          clearable
          placeholder="请输入"
          v-model={row.spsl}
          style="width: 100%"
        />
      )
    },
    {
      label: "小计(元)",
      prop: "xj",
      minWidth: "100px",
      cellRenderer: ({ row }) => {
        return (
          <span class="text-[#F76847]">{row.xj ? "￥" + row.xj : "--"}</span>
        );
      }
    },
    {
      label: "分摊后单价(元)",
      prop: "fthdj",
      minWidth: "120px",
      formatter: ({ fthdj }) => fthdj || "--"
    },
    {
      label: "分摊后总价(元)",
      prop: "fthzj",
      minWidth: "120px",
      formatter: ({ fthzj }) => fthzj || "--"
    },
    {
      label: "操作",
      width: "52px",
      fixed: "right",
      slot: "operation"
    }
  ];

  return { columns };
}
